
<template>
    <section id='foot_guide'>
      <!-- $route.path 是根据当前路由来判断图标显示颜色 -->
        <section @click = "gotoAddress({path: '/'})" class="guide_item" :class="$route.path==='/'? 'active' : ''">
            <i  class="icon-home"></i> 
            <span style="left:50%">首页</span>
        </section>
       
        <section @click = "gotoAddress({path:'/order'})" class="guide_item" :class="$route.path.indexOf('order') !== -1? 'active' : ''">
            <i  class="icon-order" ></i> 
            <span style="left:40%;">我的订单</span>
        </section>
        <section @click = "gotoAddress({path:'/me'})" class="guide_item" :class="$route.path.indexOf('me') !== -1? 'active' : ''">
            <i class="icon-me"></i>
            <span style="left:40%;">个人中心</span>
        </section>
    </section>
</template>

<script>
export default {
  data(){
    return{
      active: 'active'
    }
  },
  methods: {
    gotoAddress(path){
      this.$router.push(path)
    }
  },
}
</script>

<style scoped>
#foot_guide {
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1.85rem;
    /* padding: .2rem 0rem; */
    /* display: flex; */
    -webkit-box-shadow: 0 -0.02667rem 0.05333rem rgba(0,0,0,0.1);
    box-shadow: 0 -0.02667rem 0.05333rem rgba(0,0,0,0.1)
}

.guide_item {
  color: #727272;
  width: 31%;
  display: inline-block;
  position: relative;
  height: 100%;
  /* -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  text-align: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center */
}
.guide_item i{
  position: absolute;
  top: 0rem;
  left: 50%;
}
.guide_item span{
  position: absolute;
  top: 1.1rem;
}
.guide_item.active{
  color: #2e9670;
}
.guide_item.active span{
  color: #2e9670;
}
.guide_item span {
  font-size: .35rem;
  color: #999999
}
</style>